<template>
	<div class="orderDetail">
		<Header><span slot="back" @click="goback">返回订单</span></Header>
		<ul class="goodList">
			<li v-for="(item, index) in goodList" :key="item._id + Math.random()">
				<!-- <img :src="item.product.coverImg" alt="" /> -->
				<div>商品{{ index + 1 }}</div>
				<div>商品数量{{ item.quantity }}</div>
				<div>商品单价{{ item.price }}</div>
			</li>
		</ul>
		<div class="info">
			<p class="name">姓名：{{ order.receiver }}</p>
			<p class="address">地址：{{ order.regions + order.address }}</p>
			<p class="time">时间：{{ order.createdAt }}</p>
			<p class="id">订单编码：{{ order._id }}</p>
			<p class="sum">总计：{{ order.price }}</p>
		</div>
	</div>
</template>

<script>
import Header from "@/components/header";
import { reqOrderDetail } from "@/api/order";
export default {
	data() {
		return {
			goodList: [],
			order: {},
		};
	},
	computed: {},
	watch: {},

	methods: {
		// 点击返回按钮
		goback() {
			this.$router.go(-1);
		},
		// 获取订单详情调用接口
		async getOrderDetail(id) {
			const res = await reqOrderDetail(id);
			console.log(res);
			this.goodList = res.details;
			console.log("111", this.goodList);
			this.order = res.order;
		},
	},
	created() {
		// 在这里获取传递过来的id
		const id = this.$route.params.id;
		console.log(id);
		// 调用获取订单详情方法
		this.getOrderDetail(id);
	},
	mounted() {},
	components: {
		Header,
	},
};
</script>
<style scoped>
.goodList li {
	width: 100%;
	height: 60px;
	margin-bottom: 10px;
	text-indent: 10px;
}
.goodList li div {
	height: 20px;
	line-height: 20px;
}
.goodList img {
	width: 100px;
	height: 100px;
}
.info p {
	width: 100%;
	height: 25px;
	line-height: 25px;
	text-indent: 10px;
}
</style>
